<template>
  <div ref="logContainer" class="bottom_log">
    <p v-for="logEntry in logData" :key="logEntry">{{ logEntry }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logData: this.$store.state.model.logData,
    };
  },

  watch: {
    'logData': 'scrollToBottom',
  },

  mounted() {
    this.scrollToBottom();
  },

  methods: {
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.logContainer;
        container.scrollTop = container.scrollHeight;
      });
    }
  },
};
</script>

<style scoped>
.bottom_log {
  position: absolute;
  top: 50px;
  left: 7px;
  width: 100%;
  height: 80%;
  overflow: scroll;
}

p {
  border: 1px #ccc;
  margin-top: 10px;
  text-align: left;
  line-height: 0.5em;
}
</style>